<template>
	<view class="container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">学生签到系统</text>
			<text class="subtitle">{{grade}} · {{formattedChineseDate}}</text>
		</view>

		<!-- 签到统计卡片 -->
		<view class="stats-container">
			<view class="stat-card">
				<text class="stat-value">{{checkedCount}}</text>
				<text class="stat-label">已选学生</text>
			</view>
			<view class="stat-card primary">
				<text class="stat-value">{{presentCount}}</text>
				<text class="stat-label">{{currentCheckType === 1 ? '上午已签到' : '下午已签到'}}</text>
			</view>
			<view class="stat-card warning">
				<text class="stat-value">{{absentCount}}</text>
				<text class="stat-label">{{currentCheckType === 1 ? '上午未到' : '下午未到'}}</text>
			</view>
		</view>

		<!-- 修改操作按钮部分 -->
		<view class="action-bar">
			<button class="btn check-all" @click="toggleSelectAll">
				<text>{{isAllSelected ? '取消全选' : '全选'}}</text>
			</button>
			<button class="btn present" @click="markPresent">
				<text>{{currentCheckType === 1 ? '上午签到' : '下午签到'}}</text>
			</button>
			<button class="btn absent" @click="showAbsentReasonDialog">
				<text>{{currentCheckType === 1 ? '上午未到' : '下午未到'}}</text>
			</button>
		</view>

		<!-- 添加未到原因对话框 -->
		<uni-popup ref="absentReasonDialog" type="dialog">
			<uni-popup-dialog mode="input" title="填写未到原因" placeholder="请输入学生未到的原因"
				@confirm="confirmAbsentReason"></uni-popup-dialog>
		</uni-popup>
		<!-- 学生列表 -->
		<scroll-view class="student-list" scroll-y>
			<view class="list-header">
				<text class="header-text">学生列表</text>
				<text class="header-count">{{students.length}}人</text>
			</view>

			<checkbox-group @change="onStudentSelect">
				<view class="student-card" v-for="student in studentsWithCheckInfo" :key="student.userId">
					<label class="student-info">
						<checkbox class="student-checkbox" :value="String(student.userId)" :checked="student.checked" />
						<view class="avatar" :style="{backgroundColor: getAvatarColor(student.studentName)}">
							{{student.studentName.charAt(0)}}
						</view>
						<view class="info">
							<text class="name">{{student.studentName}}</text>
							<text class="meta">{{student.parentName}} · {{student.phoneNumber}}</text>
						</view>
						<view class="status" :class="getStatusClass(student.status)">
							{{getStatusText(student.status)}}
						</view>
					</label>

					<!-- 修改打卡信息部分 -->
					<view class="check-info">
					    <!-- 上午打卡信息 -->
					    <view class="check-section">
					        <view class="section-header">
					            <view class="time-badge morning">
					                <text>上午</text>
					            </view>
					            <view class="check-summary">
					                <text v-if="student.morningChecks" class="check-status"
					                    :class="getCheckStatusClass(student.morningChecks[0].status)">
					                    {{getCheckStatusText(student.morningChecks[0].status)}}
					                </text>
					                <text v-else class="check-status unchecked">未打卡</text>
					            </view>
					        </view>
					
					        <view v-if="student.morningChecks" class="check-details">
					            <view v-for="(check, index) in student.morningChecks" :key="index" class="check-record">
					                <view class="record-time">
					                    <text class="icon">⏱</text>
					                    <text>{{formatTime(check.checkTime)}}</text>
					                </view>
					                <view class="record-teacher">
					                    <text class="icon">👨‍🏫</text>
					                    <text>{{check.teacherName || '无记录'}}</text>
					                </view>
					                <!-- 添加未到原因显示 -->
					                <view v-if="check.status === 0 && check.remark" class="record-reason">
					                    <text class="icon">📝</text>
					                    <text class="reason-text">{{check.remark}}</text>
					                </view>
					            </view>
					        </view>
					    </view>
					
					    <!-- 下午打卡信息 -->
					    <view class="check-section">
					        <view class="section-header">
					            <view class="time-badge afternoon">
					                <text>下午</text>
					            </view>
					            <view class="check-summary">
					                <text v-if="student.afternoonChecks" class="check-status"
					                    :class="getCheckStatusClass(student.afternoonChecks[0].status)">
					                    {{getCheckStatusText(student.afternoonChecks[0].status)}}
					                </text>
					                <text v-else class="check-status unchecked">未打卡</text>
					            </view>
					        </view>
					
					        <view v-if="student.afternoonChecks" class="check-details">
					            <view v-for="(check, index) in student.afternoonChecks" :key="index" class="check-record">
					                <view class="record-time">
					                    <text class="icon">⏱</text>
					                    <text>{{formatTime(check.checkTime)}}</text>
					                </view>
					                <view class="record-teacher">
					                    <text class="icon">👨‍🏫</text>
					                    <text>{{check.teacherName || '无记录'}}</text>
					                </view>
					                <!-- 添加未到原因显示 -->
					                <view v-if="check.status === 0 && check.remark" class="record-reason">
					                    <text class="icon">📝</text>
					                    <text class="reason-text">{{check.remark}}</text>
					                </view>
					            </view>
					        </view>
					    </view>
					</view>
				</view>
			</checkbox-group>

			<view v-if="students.length === 0" class="empty-state">
				<image src="/static/empty.png" class="empty-image"></image>
				<text class="empty-text">暂无学生数据</text>
			</view>

			<view v-if="isFetchingRecords" class="loading-state">
				<view class="loading-content">
					<view class="loading-spinner"></view>
					<text>正在获取打卡记录 ({{ fetchedCount }}/{{ students.length }})</text>
				</view>
				<view class="progress-container">
					<view class="progress-bar" :style="{width: `${(fetchedCount / students.length) * 100}%`}"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import {
		globalVariable
	} from '../../configMy.js';

	export default {
		data() {
			return {
				grade: '', // 从上级页面传入的年级
				students: [],
				checkRecords: [],
				currentDate: new Date(),
				isFetchingRecords: false,
				fetchedCount: 0,
				attendanceRecords: {},
				currentTeacher: {
					teacherId: '',
					name: ''
				},
				selectedStudentIds: [],
				absentReason: '', // 未到原因
				selectedStudentsForAbsent: []
			}
		},
		onLoad(options) {
			this.grade = options.grade || '一年级';
			this.loadTeacherInfo();
			this.loadStudents();
		},
		computed: {
			checkedCount() {
				return this.students.filter(s => s.checked).length;
			},
			presentCount() {
				return this.students.filter(s => {
					const records = this.checkRecords.filter(r => String(r.studentId) === String(s.userId));
					const latestRecord = records.sort((a, b) => new Date(b.checkTime) - new Date(a.checkTime))[0];
					return latestRecord && latestRecord.status === 1 && latestRecord.checkType === this
						.currentCheckType;
				}).length;
			},
			absentCount() {
				return this.students.filter(s => {
					const records = this.checkRecords.filter(r => String(r.studentId) === String(s.userId));
					const latestRecord = records.sort((a, b) => new Date(b.checkTime) - new Date(a.checkTime))[0];
					return latestRecord && latestRecord.status === 0 && latestRecord.checkType === this
						.currentCheckType;
				}).length;
			},
			isAllSelected() {
				return this.students.length > 0 && this.students.every(s => s.checked);
			},
			formattedChineseDate() {
				const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				const year = this.currentDate.getFullYear();
				const month = this.currentDate.getMonth() + 1;
				const day = this.currentDate.getDate();
				const weekday = weekdays[this.currentDate.getDay()];
				return `${year}年${month}月${day}日 ${weekday}`;
			},
			formattedDate() {
				const year = this.currentDate.getFullYear();
				const month = String(this.currentDate.getMonth() + 1).padStart(2, '0');
				const day = String(this.currentDate.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			studentsWithCheckInfo() {
				return this.students.map(student => {
					// 获取该学生所有打卡记录（按时间降序排序）
					const allRecords = this.checkRecords
						.filter(record => String(record.studentId) === String(student.userId))
						.sort((a, b) => new Date(b.checkTime) - new Date(a.checkTime));

					// 分离上午和下午的记录
					const morningChecks = allRecords.filter(r => r.checkType === 1);
					const afternoonChecks = allRecords.filter(r => r.checkType === 2);

					// 获取当前签到类型的最新状态
					const currentTypeRecords = allRecords.filter(r => r.checkType === this.currentCheckType);
					const displayStatus = currentTypeRecords.length > 0 ?
						(currentTypeRecords[0].status === 1 ? 'present' : 'absent') :
						'unmarked';

					return {
						...student,
						status: displayStatus,
						morningChecks: morningChecks.length > 0 ? morningChecks : null,
						afternoonChecks: afternoonChecks.length > 0 ? afternoonChecks : null,
						morningCheck: morningChecks.length > 0 ? morningChecks[0] : null,
						afternoonCheck: afternoonChecks.length > 0 ? afternoonChecks[0] : null
					};
				});
			},
			// 判断当前是上午还是下午 (上午: 0:00-12:00, 下午: 12:00-24:00)
			currentCheckType() {
				const hours = new Date().getHours();
				return hours < 12 ? 1 : 2;
			},
			currentCheckRemark() {
				return this.currentCheckType === 1 ? '上午到校' : '下午到校';
			}
		},
		methods: {
			loadTeacherInfo() {
				uni.getStorage({
					key: "teacher",
					success: (res) => {
						this.currentTeacher = res.data;
					},
					fail: () => {
						console.error('获取教师信息失败');
						this.currentTeacher = {
							teacherId: 'unknown',
							name: '未知老师'
						};
					}
				});
			},
			getBeijingTime() {
				const now = new Date();
				// 北京时间比UTC快8小时
				const beijingOffset = 8 * 60 * 60 * 1000;
				return new Date(now.getTime() + beijingOffset);
			},
			getBeijingTimeString() {
				const beijingTime = this.getBeijingTime();
				return beijingTime.toISOString().replace('T', ' ').substring(0, 19);
			},
			loadStudents() {
				uni.showLoading({
					title: '加载中...'
				});

				uni.request({
					url: globalVariable + "/getStudentsByGrade",
					method: 'GET',
					data: {
						grade: this.grade
					},
					success: (res) => {
						if (res.data.status === 1) {
							this.students = res.data.data.map(student => ({
								...student,
								checked: false,
								status: this.attendanceRecords[student.userId] || 'unmarked'
							}));
							this.fetchCheckRecordsOneByOne();
						}
					},
					complete: () => uni.hideLoading()
				});
			},
			async fetchCheckRecordsOneByOne() {
				this.isFetchingRecords = true;
				this.fetchedCount = 0;
				this.checkRecords = [];

				const batchSize = 3;
				const totalStudents = this.students.length;

				for (let i = 0; i < totalStudents; i += batchSize) {
					const batch = this.students.slice(i, i + batchSize);
					const promises = batch.map(student => this.fetchSingleCheckRecord(student.userId));

					try {
						await Promise.all(promises);
						this.fetchedCount = Math.min(i + batchSize, totalStudents);
					} catch (error) {
						console.error('获取打卡记录出错:', error);
					}
				}

				this.isFetchingRecords = false;
			},
			fetchSingleCheckRecord(studentId) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: globalVariable + "/getStudentCheckByIdDate",
						method: 'GET',
						data: {
							date: this.formattedDate,
							studentId: studentId
						},
						success: (res) => {
							if (res.data.status === 1 && res.data.data) {
								const records = res.data.data;
								// 按时间降序排序，确保最新记录在前
								records.sort((a, b) => new Date(b.checkTime) - new Date(a.checkTime));

								// 保存所有记录
								records.forEach(record => {
									if (record) {
										record.studentId = String(record.studentId);
										this.checkRecords.push(record);
									}
								});

								// 更新学生状态
								const currentTypeRecords = records.filter(r => r.checkType === this
									.currentCheckType);
								if (currentTypeRecords.length > 0) {
									const latestStatus = currentTypeRecords[0].status;
									this.$set(this.attendanceRecords, studentId, latestStatus === 1 ?
										'present' : 'absent');
								}
							}
							resolve();
						},
						fail: (err) => {
							console.error('获取打卡记录失败:', err);
							reject(err);
						}
					});
				});
			},
			onStudentSelect(e) {
				const checkedIds = e.detail.value.map(id => parseInt(id));
				this.students = this.students.map(student => ({
					...student,
					checked: checkedIds.includes(student.userId)
				}));
			},
			toggleSelectAll() {
				const shouldSelectAll = !this.isAllSelected;
				this.students = this.students.map(student => ({
					...student,
					checked: shouldSelectAll
				}));
			},
			markPresent() {
				// 过滤出已选且未标记为present的学生
				const selectedStudents = this.students.filter(s =>
					s.checked && s.status !== 'present'
				);

				if (selectedStudents.length === 0) {
					let msg = '请先选择学生';
					if (this.checkedCount > 0) {
						msg = '选中的学生已经签到，无需重复操作';
					}
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					return;
				}

				this.markStudents(1, '签到成功');
			},
			// 确认未到原因
			confirmAbsentReason(reason) {
				this.absentReason = reason;
				this.markAbsent();
			},

			// 修改markAbsent方法
			markAbsent() {
				// 使用北京时间
				const checkTime = this.getBeijingTimeString();
				const checkType = this.currentCheckType;
				const remark = `${this.currentCheckRemark}（未到原因：${this.absentReason}）`;

				// 更新本地状态
				const updatedStudents = [];
				this.students = this.students.map(student => {
					if (student.checked) {
						// 检查是否已经存在相同状态的打卡记录
						const existingRecords = this.checkRecords.filter(
							r => String(r.studentId) === String(student.userId) &&
							r.checkType === checkType &&
							r.status === 0
						);

						if (existingRecords.length === 0) {
							// 没有相同状态的记录才需要更新
							this.attendanceRecords[student.userId] = 'absent';

							updatedStudents.push({
								studentId: student.userId,
								studentName: student.studentName,
								grade: student.grade,
								teacherId: this.currentTeacher.teacherId,
								teacherName: this.currentTeacher.name,
								checkType: checkType,
								checkTime: checkTime,
								remark: remark,
								status: 0
							});

							return {
								...student,
								status: 'absent',
								checked: false
							};
						}
						return {
							...student,
							checked: false
						};
					}
					return student;
				});

				if (updatedStudents.length === 0) {
					uni.showToast({
						title: '没有需要更新的记录',
						icon: 'none'
					});
					return;
				}

				// 调用API更新签到状态
				uni.request({
					url: globalVariable + "/updateAttendance",
					method: 'POST',
					data: {
						checkRecords: updatedStudents
					},
					success: (res) => {
						if (res.data.status === 1) {
							uni.showToast({
								title: '已标记未到',
								icon: 'success'
							});
							// 刷新打卡记录
							this.fetchCheckRecordsOneByOne();
						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});

				// 重置未到原因
				this.absentReason = '';
			},
			markStudents(status, successMsg) {
				// 使用北京时间
				const checkTime = this.getBeijingTimeString();
				const checkType = this.currentCheckType;
				const remark = this.currentCheckRemark;

				// 更新本地状态
				const updatedStudents = [];
				this.students = this.students.map(student => {
					if (student.checked) {
						// 检查是否已经存在相同状态的打卡记录
						const existingRecords = this.checkRecords.filter(
							r => String(r.studentId) === String(student.userId) &&
							r.checkType === checkType &&
							r.status === status
						);

						if (existingRecords.length === 0) {
							// 没有相同状态的记录才需要更新
							this.attendanceRecords[student.userId] = status === 1 ? 'present' : 'absent';

							updatedStudents.push({
								studentId: student.userId,
								studentName: student.studentName,
								grade: student.grade,
								teacherId: this.currentTeacher.teacherId,
								teacherName: this.currentTeacher.name,
								checkType: checkType,
								checkTime: checkTime,
								remark: remark,
								status: status
							});

							return {
								...student,
								status: status === 1 ? 'present' : 'absent',
								checked: false
							};
						}
						return {
							...student,
							checked: false
						};
					}
					return student;
				});

				if (updatedStudents.length === 0) {
					uni.showToast({
						title: '没有需要更新的记录',
						icon: 'none'
					});
					return;
				}

				// 调用API更新签到状态
				uni.request({
					url: globalVariable + "/updateAttendance",
					method: 'POST',
					data: {
						checkRecords: updatedStudents
					},
					success: (res) => {
						if (res.data.status === 1) {
							uni.showToast({
								title: successMsg,
								icon: 'success'
							});
							// 刷新打卡记录
							this.fetchCheckRecordsOneByOne();
						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误',
							icon: 'none'
						});
					}
				});
			},
			getAvatarColor(name) {
				const colors = [
					'#FF6B6B', '#4ECDC4', '#45B7D1',
					'#A37AFC', '#FFA36B', '#6BFF8E',
					'#FFD166', '#06D6A0', '#118AB2'
				];
				const charCode = name.charCodeAt(0) || 0;
				return colors[charCode % colors.length];
			},
			getStatusClass(status) {
				return {
					'unmarked': status === 'unmarked',
					'present': status === 'present',
					'absent': status === 'absent'
				};
			},
			getStatusText(status) {
				const statusMap = {
					'unmarked': '未签到',
					'present': '已签到',
					'absent': '未到'
				};
				return statusMap[status] || '未知';
			},
			getCheckStatusClass(status) {
				return {
					'checked': status === 1,
					'absent': status === 0,
					'unchecked': status === null || status === undefined
				};
			},
			getCheckStatusText(status) {
				return status === 1 ? '正常' : status === 0 ? '请假' : '未打卡';
			},
			formatTime(timeString) {
				if (!timeString) return '';
				try {
					const timePart = timeString.split(' ')[1];
					return timePart ? timePart.substring(0, 5) : '';
				} catch (e) {
					return '';
				}
			},
			showAbsentReasonDialog() {
				// 过滤出已选的学生
				this.selectedStudentsForAbsent = this.students.filter(s => s.checked);

				if (this.selectedStudentsForAbsent.length === 0) {
					uni.showToast({
						title: '请先选择学生',
						icon: 'none'
					});
					return;
				}

				// 显示对话框
				this.$refs.absentReasonDialog.open();
			},
		}
	}
</script>
<style scoped>
	* {
		box-sizing: border-box;
	}

	/* 添加对话框样式 */
	.uni-popup-dialog {
		width: 80%;
		border-radius: 16rpx;
	}

	.uni-popup-dialog-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.uni-popup-dialog-input {
		margin: 20rpx 0;
		padding: 16rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
	/* 添加未到原因样式 */
	.record-reason {
	    display: flex;
	    align-items: flex-start;
	    width: 100%;
	    margin-top: 8rpx;
	    padding: 8rpx;
	    background-color: #fff9f9;
	    border-radius: 8rpx;
	    font-size: 24rpx;
	    color: #e74c3c;
	}
	
	.reason-text {
	    flex: 1;
	    word-break: break-all;
	}
	
	/* 调整打卡记录布局 */
	.check-record {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    padding: 8rpx 0;
	}
	
	.record-time,
	.record-teacher {
	    display: flex;
	    align-items: center;
	    width: 48%;
	    font-size: 24rpx;
	    color: #7f8c8d;
	    margin-bottom: 8rpx;
	}

	.uni-popup-dialog-btn {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.uni-popup-dialog-btn button {
		flex: 1;
		margin: 0 10rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
	}

	.container {
		padding: 24rpx;
		background-color: #f8f9fa;
		min-height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	}

	/* 顶部标题 */
	.header {
		margin-bottom: 32rpx;
		padding: 0 16rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: 600;
		color: #2c3e50;
		display: block;
		margin-bottom: 8rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #7f8c8d;
	}

	/* 统计卡片 */
	.stats-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.stat-card {
		flex: 1;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin: 0 8rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		text-align: center;
	}

	.stat-card.primary {
		background-color: #3498db;
		color: white;
	}

	.stat-card.warning {
		background-color: #e74c3c;
		color: white;
	}

	.stat-value {
		font-size: 48rpx;
		font-weight: 700;
		display: block;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 24rpx;
		opacity: 0.9;
	}

	/* 操作按钮 */
	.action-bar {
		display: flex;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.btn {
		flex: 1;
		margin: 0 12rpx;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 500;
		border: none;
		background-color: #fff;
		color: #2c3e50;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		transition: all 0.2s ease;
	}

	.btn:active {
		transform: scale(0.98);
	}

	.btn.check-all {
		background-color: #95a5a6;
		color: white;
	}

	.btn.present {
		background-color: #2ecc71;
		color: white;
	}

	.btn.absent {
		background-color: #e74c3c;
		color: white;
	}

	/* 学生列表 */
	.student-list {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 24rpx;
		max-height: calc(100vh - 400rpx);
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #ecf0f1;
	}

	.header-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
	}

	.header-count {
		font-size: 26rpx;
		color: #7f8c8d;
	}

	/* 学生卡片 */
	.student-card {
		border-bottom: 1rpx solid #ecf0f1;
		padding: 24rpx 10rpx;
	}

	.student-info {
		display: flex;
		align-items: center;
	}

	.student-checkbox {
		margin-right: 20rpx;
		transform: scale(1.2);
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.info {
		flex: 1;
	}

	.name {
		font-size: 32rpx;
		font-weight: 500;
		color: #2c3e50;
		display: block;
		margin-bottom: 4rpx;
	}

	.meta {
		font-size: 24rpx;
		color: #95a5a6;
	}

	.status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.status.unmarked {
		background-color: #f5f5f5;
		color: #95a5a6;
	}

	.status.present {
		background-color: #d5f5e3;
		color: #27ae60;
	}

	.status.absent {
		background-color: #fadbd8;
		color: #e74c3c;
	}

	/* 打卡信息 */
	.check-info {
		margin-top: 20rpx;
		margin-left: 120rpx;
		padding-top: 16rpx;
		border-top: 1rpx dashed #ecf0f1;
	}

	.check-section {
		margin-bottom: 20rpx;
	}

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.time-badge {
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		margin-right: 16rpx;
	}

	.time-badge.morning {
		background-color: #fff8e1;
		color: #f39c12;
	}

	.time-badge.afternoon {
		background-color: #e3f2fd;
		color: #3498db;
	}

	.check-summary {
		flex: 1;
	}

	.check-status {
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.check-status.checked {
		background-color: #d5f5e3;
		color: #27ae60;
	}

	.check-status.absent {
		background-color: #fadbd8;
		color: #e74c3c;
	}

	.check-status.unchecked {
		background-color: #f5f5f5;
		color: #95a5a6;
	}

	.check-details {
		margin-left: 40rpx;
	}

	.check-record {
		display: flex;
		justify-content: space-between;
		padding: 8rpx 0;
	}

	.record-time,
	.record-teacher {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #7f8c8d;
	}

	.icon {
		margin-right: 8rpx;
		font-size: 24rpx;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 0;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 24rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 28rpx;
		color: #95a5a6;
	}

	/* 加载状态 */
	.loading-state {
		padding: 24rpx 0;
	}

	.loading-content {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
		font-size: 26rpx;
		color: #7f8c8d;
	}

	.loading-spinner {
		width: 32rpx;
		height: 32rpx;
		border: 4rpx solid #3498db;
		border-top-color: transparent;
		border-radius: 50%;
		margin-right: 12rpx;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	.progress-container {
		height: 6rpx;
		background-color: #ecf0f1;
		border-radius: 3rpx;
		overflow: hidden;
	}

	.progress-bar {
		height: 100%;
		background-color: #3498db;
		border-radius: 3rpx;
		transition: width 0.3s ease;
	}
	
	
</style>